<!--
@description    封装通用编辑单元格
@author         秦俊强
@email          458112865@qq.com
@create         2020-01-15 21:30
-->

<template>
  <div class="editable-cell">

    <!-- 编辑评分 | 意见 start -->
    <div v-if="editable" class="editable-cell-input-wrapper">
      <!-- 分数 -->
      <a-input v-if="attr === 'input'"
               class="edit-input" type="tel"
               :value="value" maxlength="4" ref="editInput"
               @change="handleChange(attr, $event)"
               @pressEnter="changeSate('check')"
               @blur="changeSate('check')"/>

      <!-- 意见 -->
      <a-textarea v-if="attr === 'textarea'"
                  class="edit-textarea" type="text"
                  :value="value" ref="editextarea"
                  @change="handleChange(attr, $event)"
                  @pressEnter="changeSate('check')"
                  @blur="changeSate('check')"/>

      <!--<a-icon type="check" class="editable-cell-icon-check"
              @click="changeSate('check')" title="确定" />

      <a-icon type="close" class="editable-cell-icon-cancel"
              @click="changeSate('cancel')" title="取消" />-->
    </div>
    <!-- 编辑评分 | 意见 end -->

    <!-- 默认显示 start -->
    <div v-else class="editable-cell-text-wrapper" @click="changeSate('edit')">
      <span v-if="value || value == 0" :title="value"
            :class="(rec.vStatus == '1') ? 'value' : ''">{{ value }}</span>
      <span style="color: #cccccc;" v-else>--</span>

      <a-icon type="edit" class="editable-cell-icon" title="编辑" />
    </div>
    <!-- 默认显示 end -->

  </div>
</template>



<script>
  import ATextarea from 'ant-design-vue/es/input/TextArea'
  export default {
    components: { ATextarea },

    props: {
      /* 要显示的初始值 */
      text: null,

      /* 标记是使用 input 还是 textarea */
      inputAttr: String,

      /* 列表第几行 */
      ind: null,

      /* 对应 key 值 */
      k: null,

      /* 更新父组件 */
      upData: {
        type: Function,
        default: null
      },

      /* 每一行的所有字段 */
      rec: {}
    },

    data() {
      return {
        value: this.text,
        attr: this.inputAttr,
        editable: false
      };
    },

    methods: {

      /* 监听输入值的变化 */
      handleChange(attr, e) {
        let value = e.target.value;

        if (attr === 'input') {

         let number = /^-?[0-9]*$/;
          if (!number.test(value)) {
            this.$message.warning('请正确输入分数！');
            return;
          }
          // 不允许输入小数
          if (value.indexOf('.') >= 0) {
            this.value = value.split('.')[0];
            this.$message.warning('不允许输入小数！');
            return;
          }

          // TODO 输入空时，默认 0，这里不该给默认值...需求不合理
          // if (!value) {
          //   this.value = '0';
          //   return;
          // }
          if (value.indexOf('0') === 0 && value.length >= 2 || value.indexOf('-0') === 0 && value.length >= 3) {
            this.value = '0';
            return;
          }

          if (value > 10) {    // 评分数值限制最大 10 分
            this.value = 10;
            this.$message.warning('最大分数为 10 分！');
            return;
          }

          if (value < (-10)) {      // 评分数值限制最小 (-10) 分
            this.value = (-10);
            this.$message.warning('评分分数不能小于 (-10)！');
            return;
          }

          this.value = value;
        } else {
          this.value = e.target.value;
        }
      },

      /* 单击 */
      check() { this.editable = false; },

      /* 状态切换 */
      changeSate(str) {
        let t = this;

        if (!str) {
          t.editable = true;
          return;
        }

        // 点击编辑，切换成可输入的状态
        if (str === 'edit') {
          t.editable = true;

          setTimeout(() => {
            let editType = '';
            if (t.attr === 'input') { editType = 'editInput'; }
            if (t.attr === 'textarea') { editType = 'editextarea'; }

            // 鼠标光标聚焦
            t.$refs[editType] && t.$refs[editType].focus();
          }, 10);

          return;
        }

        // 点击取消
        if (str === 'cancel') { t.value = t.text; }

        // 不管是点击确定或取消，都需要执行
        if (str === 'check' || str === 'cancel') {
          t.editable = false;
          t.upData && t.upData(t.value, t.k, t.ind);    // 通知父级更新数据
        }
      }

    },
  };
</script>



<style lang="less" scoped>
  .edit-input { width: 45%; }

  .editable-cell-input-wrapper input {
    height: 100%;
  }

  .editable-cell-input-wrapper input,
  .editable-cell-input-wrapper textarea {
    padding: 4px;
  }

  .editable-cell-text-wrapper { cursor: pointer; }
  .editable-cell-text-wrapper:hover span { text-decoration: underline; }

  .edit-textarea {
    width: 80%;
    height: 50px;
    resize: none;
  }

  .editable-cell-icon { color: #FA541C; }
  .editable-cell-icon-check { color: #1890FF; }
  .editable-cell-icon-cancel { color: #808080; }

  .value { color: #14BA89; font-weight: bold; }

  .editable-cell-icon-check,
  .editable-cell-icon-cancel,
  .editable-cell-icon {
    margin-left: 8px;
  }
</style>
